<template>
	<view class="navbar-root" :style="rootStyle">
		<!-- 底层背景图 -->
		<image class="bg-image" src="/static/index/图层 1@2x.png" mode="scaleToFill" />

		<!-- 占位：原生状态栏高度（APP、H5 同步按 px 处理） -->
		<view class="status-space" :style="{ height: statusBarPx + 'px' }"></view>

		<!-- 内容层：外部插槽，可放返回、标题、搜索框等 -->
		<view class="content-wrap">
			<slot />
		</view>
	</view>

</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue'

	// 可配置整体高度（不含状态栏），默认 180rpx；支持传 px/rpx，推荐 rpx
	const props = defineProps({
		height: {
			type: String,
			default: '400rpx'
		},
		// 背景圆角，可选
		radius: {
			type: String,
			default: '0'
		}
	})

	const sys = uni.getSystemInfoSync()
	const statusBarPx = ref(sys.statusBarHeight || 0)

	const rootStyle = computed(() => ({
		height: `calc(${props.height} + ${statusBarPx.value}px)`,
		borderBottomLeftRadius: props.radius,
		borderBottomRightRadius: props.radius
	}))
</script>

<style scoped>
	.navbar-root {
		position: relative;
		width: 100%;
		overflow: hidden;
	}

	.bg-image {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		z-index: 0;
		/* 背景置底 */
	}

	.status-space {
		width: 100%;
	}

	.content-wrap {
		position: relative;
		z-index: 1;
		/* 内容在背景图之上 */
		width: 100%;
		padding: 0 24rpx;
		box-sizing: border-box;
	}
</style>